import { Button, Checkbox, Col, Form, Input, Row, Select } from 'antd';
import React, { useState } from 'react';
import { useSelector } from 'umi';

import '../models/accountPassword';
import './index.less';
import ModalResult from './modalResult';

const { Option } = Select;

interface AccountType {
  key: number;
  username: string;
  password: string;
}

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 8,
    },
  },
};

const Register: React.FC = () => {
  const [accountList, setAccountList] = useSelector((state: any) => state.AccountPassword.account);
  const [myAccount, setMyAccount] = useState<AccountType[]>([]);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const [form] = Form.useForm();

  const changeIsModalOpen = (val: boolean) => {
    setIsModalOpen(val);
  };

  const onFinish = (values: any) => {
    console.log('Received values of form: ', values, setAccountList);
    if (accountList) {
      setMyAccount(accountList);
      const { username } = values;
      const { password } = values;
      const key = 11;
      myAccount.push({ username, password, key });

      localStorage.setItem('user_account', JSON.stringify(myAccount));
      changeIsModalOpen(true);
    }
  };

  const prefixSelector = (
    <Form.Item name="prefix" noStyle>
      <Select style={{ width: 70 }}>
        <Option value="86">+86</Option>
        <Option value="87">+87</Option>
      </Select>
    </Form.Item>
  );

  return (
    <div className="from_list">
      <Form
        {...formItemLayout}
        form={form}
        name="register"
        onFinish={onFinish}
        initialValues={{
          residence: ['zhejiang', 'hangzhou', 'xihu'],
          prefix: '86',
        }}
        style={{ maxWidth: 800 }}
        scrollToFirstError
      >
        <Form.Item
          name="username"
          label="账号"
          rules={[
            {
              required: true,
              message: '请输入你的账号',
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          name="password"
          label="密码"
          rules={[
            {
              required: true,
              message: '请输入你的密码',
            },
          ]}
          hasFeedback
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          name="password_two"
          label="重复密码"
          dependencies={['password']}
          hasFeedback
          rules={[
            {
              required: true,
              message: '请在此输入你的密码',
            },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || getFieldValue('password') === value) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error('两次密码输入不一致'));
              },
            }),
          ]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          name="nickname"
          label="昵称"
          tooltip="你想要别人怎么称呼你？"
          rules={[{ required: true, message: '请输入你的昵称', whitespace: true }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          name="phone"
          label="手机号"
          rules={[{ required: true, message: '请输入你的手机号' }]}
        >
          <Input addonBefore={prefixSelector} style={{ width: '100%' }} maxLength={11} />
        </Form.Item>

        <Form.Item name="gender" label="性别" rules={[{ required: true, message: '请选择性别' }]}>
          <Select placeholder="选择你的性别">
            <Option value="男性">男</Option>
            <Option value="女性">女</Option>
            <Option value="保密">保密</Option>
          </Select>
        </Form.Item>

        <Form.Item label="验证码">
          <Row gutter={8}>
            <Col span={12}>
              <Form.Item
                name="captcha"
                noStyle
                rules={[{ required: true, message: '请填写验证码' }]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Button>获取验证码</Button>
            </Col>
          </Row>
        </Form.Item>

        <Form.Item
          name="agreement"
          valuePropName="checked"
          rules={[
            {
              validator: (_, value) =>
                value ? Promise.resolve() : Promise.reject(new Error('Should accept agreement')),
            },
          ]}
          {...tailFormItemLayout}
        >
          <Checkbox>
            <a href="">注册协议</a>
          </Checkbox>
        </Form.Item>
        <Form.Item {...tailFormItemLayout}>
          <Button type="primary" htmlType="submit">
            注册
          </Button>
        </Form.Item>
      </Form>
      <ModalResult changeIsModalOpen={changeIsModalOpen} isopen={isModalOpen} />
    </div>
  );
};

export default Register;
